<script setup lang="ts">
import { useUsers } from '@/store/user'
const userInfo = useUsers().user
let list = [
	{
    image: 'https://www.helloimg.com/i/2025/01/16/67892b32e8841.png'
  },
  {
    image: 'https://www.helloimg.com/i/2025/01/16/67892b32e8841.png'
  },
];

// 添加活动卡片数据
const activityList = [
  {
    icon: '/static/icons/coupon.png',
    title: '优惠券',
    subTitle: 'Coupons'
  },
  {
    icon: '/static/icons/gift.png',
    title: '礼品卡',
    subTitle: 'Gift Card'
  },
  {
    icon: '/static/icons/vip.png',
    title: '会员',
    subTitle: 'VIP'
  },
  {
    icon: '/static/icons/service.png',
    title: '客服',
    subTitle: 'Service'
  }
];
</script>
<template>
  <view class="box">
    <view class="banner">
      <u-swiper
        :list="list"
        keyName="image"
      ></u-swiper>
    </view>

    <view class="user_card">
      <view class="user_info">
        <u-avatar mode="circle" size="large" :src="userInfo.avater"></u-avatar>
        <view class="text_container">
          <text class="user_name">当前用户: {{ userInfo.name }}</text>
          <text class="welcome_text">晚上好，欢迎来到预制菜溯源平台</text>
        </view>
      </view>
    </view>
    

    <view  class="function_card">
        <navigator  class="item" url="/pages/traceability/traceability" open-type="switchTab">
          <text class="text_China">溯源产品</text>
          <text class="text_English">Traceable products</text>
        </navigator>

        <view class="line"></view>
  
        <navigator class="item" url="/pages/shop/shop" open-type="switchTab">
          <text class="text_China">我要下单</text>
          <text class="text_English">Place an order</text>
        </navigator>
    </view>

    <view class="activity_card">
      <view 
        class="activity_item" 
        v-for="(item, index) in activityList" 
        :key="index"
      >
        <image
          :src="item.icon"
          mode="aspectFit"
          class="activity_icon"
        />
        <view class="activity_text">
          <text class="activity_title">{{ item.title }}</text>
          <text class="activity_subtitle">{{ item.subTitle }}</text>
        </view>
      </view>
    </view>

    <view class="img_card">
      <image
        src="https://www.helloimg.com/i/2025/01/16/67892b4ee4010.jpg"
        mode="scaleToFill"
      />
    </view>
  </view>
</template>
<style scoped>
  .box{
    height: 100vh;
    width: 100vw;
    background-color: #f3f3f3;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .banner{
    height: 20vh;
    width: 100vw;
  }
  .user_card{
    margin-top: 25rpx;
    padding: 30rpx;
    width: 95vw;
    height: 15vh;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }

  .user_info {
    display: flex;
    align-items: flex-start;
    height: 100%;
  }

  .text_container {
    display: flex;
    flex-direction: column;
    margin-left: 20rpx;
    margin-top: 20rpx;
    flex: 1;
  }

  .user_name {
    font-size: 35rpx;
    font-weight: 600;
    margin-bottom: 15rpx;
    line-height: 1.2;
  }

  .welcome_text {
    font-size: 24rpx;
    color: #666;
    line-height: 1.2;
  }

  .function_card{
    display: flex;
    padding: 25rpx;
    margin-top: 25rpx;
    width: 95vw;
    height: 20vh;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }
  .item{
    width: 50%;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .line{
    width: 5rpx;
    height: 15vh;
    background-color: #f7f7f7;
  }
  .text_China{
    color: #63aa5d;
    margin-top: 30rpx;
    font-size: 1.9rem;
    font-weight: 800;
  }
  .text_English{
    /* color: #63aa5d; */
    font-weight: 300;
    margin-top: 25rpx;
  }
  .activity_card {
    padding: 30rpx;
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
    width: 95vw;
    height: 15vh;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }

  .activity_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 22%;
    height: 100%;
    transition: all 0.3s;
  }

  .activity_item:active {
    transform: scale(0.95);
  }

  .activity_icon {
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 15rpx;
  }

  .activity_text {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .activity_title {
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 6rpx;
  }

  .activity_subtitle {
    font-size: 20rpx;
    color: #999;
  }

  .img_card image{
    border-radius: 10px;
    margin-top: 25rpx;
    width: 95vw;
    height: 23vh;
  }
  
</style>